/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, {useState} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import {useThemeConfig} from '@docusaurus/theme-common';
import useBaseUrl from '@docusaurus/useBaseUrl';
import isInternalUrl from '@docusaurus/isInternalUrl';
import "./layer.css";
import styles from './styles.module.css';
import ThemedImage from '@theme/ThemedImage';
import IconExternalLink from '@theme/IconExternalLink';

function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
  const toUrl = useBaseUrl(to);
  const normalizedHref = useBaseUrl(href, {
    forcePrependBaseUrl: true,
  });
  return (
    <Link
      className="footer__link-item"
      {...(href
        ? {
            href: prependBaseUrlToHref ? normalizedHref : href,
          }
        : {
            to: toUrl,
          })}
      {...props}>
      {href && !isInternalUrl(href) ? (
        <span>
          {label}
          <IconExternalLink />
        </span>
      ) : (
        label
      )}
    </Link>
  );
}

const FooterLogo = ({sources, alt}) => (
  <ThemedImage className="footer__logo" alt={alt} sources={sources} />
);

function Footer() {
  const {footer} = useThemeConfig();
  const {copyright, links = [], logo = {}} = footer || {};
  const sources = {
    light: useBaseUrl(logo.src),
    dark: useBaseUrl(logo.srcDark || logo.src),
  };

  if (!footer) {
    return null;
  }

  return (
    <footer
      className={clsx('footer', {
        'footer--dark': footer.style === 'dark',
      })}>
      <div className="container">
        {links && links.length > 0 && (
          <div className="row footer__links">
            {links.map((linkItem, i) => (
              <div key={i} className="col footer__col">
                {linkItem.title != null ? (
                  <div className="footer__title">{linkItem.title}</div>
                ) : null}
                {linkItem.items != null &&
                Array.isArray(linkItem.items) &&
                linkItem.items.length > 0 ? (
                  <ul className="footer__items">
                    {linkItem.items.map((item, key) =>
                      item.html ? (
                        <li
                          key={key}
                          className="footer__item" // Developer provided the HTML, so assume it's safe.
                          // eslint-disable-next-line react/no-danger
                          dangerouslySetInnerHTML={{
                            __html: item.html,
                          }}
                        />
                      ) : (
                        <li key={item.href || item.to} className="footer__item">
                          <FooterLink {...item} />
                        </li>
                      ),
                    )}
                  </ul>
                ) : null}
              </div>
            ))}
          </div>
        )}
        {(logo || copyright) && (
          <div className="footer__bottom text--center">
            {logo && (logo.src || logo.srcDark) && (
              <div className="margin-bottom--sm">
                {logo.href ? (
                  <Link href={logo.href} className={styles.footerLogoLink}>
                    <FooterLogo alt={logo.alt} sources={sources} />
                  </Link>
                ) : (
                  <FooterLogo alt={logo.alt} sources={sources} />
                )}
              </div>
            )}
            {copyright ? (
              <div
                className="footer__copyright" // Developer provided the HTML, so assume it's safe.
                // eslint-disable-next-line react/no-danger
                dangerouslySetInnerHTML={{
                  __html: copyright,
                }}
              />
            ) : null}
          </div>
        )}
      </div>
      {/*<Layer></Layer>*/}
    </footer>
  );
}

const Layer = () => {
  const storeKey = "show-modal-3";
  const [show, setShow] = useState(() => {
    try {
      const value = window.localStorage.getItem(storeKey);
      return !value ? true : false;
    }
    catch {
      return true;
    }
  });
  if (!show) {
    return null;
  }

  const hideModal = (ev) => {
    setShow(false);
    window.localStorage.setItem(storeKey, false);
  }

  // 点击 ok
  const handleOk = (ev) => {
    hideModal();
    window.open("https://www.oschina.net/project/top_cn_2021/?id=573");
  };

  // 点击取消
  const handleCancel = (ev) => {
    hideModal();
  }

  return <div className="layer">
    {show && <div className="layer-container animate layerAnimate">
      <div className="layer-title">信息</div>
      <div className="layer-content">
        <p>
          Forest 已经进入《2021年度OSC中国最佳开源项目评选》第二轮投票，本次评选会决出最受欢迎 <b>TOP 30</b>，之前票数已经<b>清零</b>，大家重新有5票，请大家为 Forest 投上一票，感谢各位！
        </p>
        <p><a href={"javascript: window.open('https://www.oschina.net/project/top_cn_2021/?id=573')"}>https://www.oschina.net/project/top_cn_2021/?id=573</a></p>
        <p>您的支持就是 Forest 前进的动力！</p>
        <p>PS：点击 确定/取消 后近期不再弹出此信息</p>
      </div>
      <div className="layer-tools">
        <button className="layer-button" style={{ backgroundColor: '#25c2a0', color: '#fff' }} onClick={handleOk}>朕去投票！</button>
        <button className="layer-button" onClick={handleCancel}>残忍拒绝</button>
      </div>
    </div>}
  </div>
}


export default Footer;
